<template>
<el-form :model="dataForm"  ref="dataForm" :label-width="$i18n.locale === 'en-US' ? '40px' : '40px'" style="text-align:center">
    <el-row style="text-align:left">
        <el-col :span="24">
            <el-form-item label="" prop="preferentialPolicies">
                <div class="listItem2" v-for="(item, index) in dataForm.preferentialPolicies" :key="index">
                    <el-input v-model="item.human" placeholder="人群" type="textarea" :rows="2"></el-input>
                    <el-input v-model="item.preferential" placeholder="优待政策" type="textarea" :rows="2"></el-input>
                    <el-input v-model="item.condition" placeholder="适用条件" type="textarea" :rows="2"></el-input>

                    <el-link type="danger" style="margin-left: 10px" @click="delPolicies(index)">删除</el-link>
                </div>
                <el-button type="primary" @click="addPolicies()">新增</el-button>
            </el-form-item>
        </el-col>
    </el-row>
   <el-button  v-if="$hasPermission('scenic:conf:update')" type="primary" @click="confirm()" style="width:200px;height:50px">提交</el-button>
</el-form>
</template>

<script>
export default {
    data() {
        return {
            dataForm:{
                id:'',
                preferentialPolicies:[]
            }
        }
    },
    created() {
        this.getData();
    },
    methods: {
        confirm(){
            this.dataForm.preferentialPolicies=JSON.stringify(this.dataForm.preferentialPolicies);
            console.log(this.dataForm.preferentialPolicies)
                this.$http.put('/scenic/conf',this.dataForm).then(res=>{
                if(res.data.code==0){
                    this.getData();
                }
            })
        },
        getData() {
            this.$http.get('/scenic/conf/info').then(res => {
                console.log(res.data)
                if (res.data.code == 0 && res.data.data.preferentialPolicies) {
                    this.dataForm.id=res.data.data.id;
                    this.dataForm.preferentialPolicies = JSON.parse(res.data.data.preferentialPolicies);
                }
            })
        },
         addPolicies() {
            this.dataForm.preferentialPolicies.push({
                human: '',
                condition: '',
                preferential: ''
            });
        },
        delPolicies(i) {
            this.dataForm.preferentialPolicies.splice(i, 1);
        },
    }
}
</script>
<style scoped>
.listItem2 {
    width:94%;
    margin:0 0 10px;
    display: grid;
    gap: 0 20px;
    grid-template-columns: 300px 200px auto 40px;

}
</style>
